<template>
  <div class="tree">
    <b-field v-if="showSearch">
      <b-input placeholder="Search..."
               v-model="searchVal"
               type="search"
               icon="magnify"
               size="is-small"
               icon-clickable rounded>
      </b-input>
    </b-field>
    <b-menu v-if="data&&data.length>0" :activable="false">
      <list :data="searchVal?filterData:data" @tree-change="changeItem" :class="border?'':'border-none'"/>
    </b-menu>
    <div v-else>
      {{emptyText}}
    </div>
  </div>
</template>

<script>
import list from "./list";
export default {
  components:{
    list
  },
  props: {
    showSearch: {
      type: Boolean,
      default: false
    },
    border: {
      type: Boolean,
      default: false
    },
    emptyText: {
      type: String,
      default: ''
    },
    data: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    // 根据名称筛选部门树
    searchVal(val) {
      this.filterNode(val)
    }
  },
  data() {
    return {
      searchVal:'',
      filterData:null,
    }
  },
  mounted() {
  },
  methods: {
    changeItem(item){

    },
    // 筛选节点
    async filterNode(value) {
      if (!value) return this.filterData = [];
      let filterData = []
       const filterVal=function (node) {
        let ft = node.filter(v => {
          if(v.children&&v.children.length>0){
            let ftv = filterVal(v.children)
            filterData.concat(ftv)
          }
          return v.label.indexOf(value) !== -1;
        })
        filterData.concat(ft)
      }
      await filterVal(this.data)
      console.log('filterData=',filterData)
      return this.filterData = filterData
    },
  }
}
</script>
<style lang="scss" >
.tree{
  li ul{
    margin: 0.2rem 0.75em;
  }
  //a{
  //  color: #606266 !important;
  //  padding:0.3rem 0;
  //}
  .border-none li ul{
    border-left: 0;
  }
  .is-active{
    /*line-height: 3em;*/
    color: $primary;
  }
}
</style>
